<template>
  <div class="menu">
    <div class="menu-nav">
      <van-tabs v-model="active" @click="getClassify(active)">
        <van-tab v-for="(item, i) in bookList" :key="i" :title="item.name">
        </van-tab>
      </van-tabs>
    </div>
    <div class="menu-top">
      <div class="menu-top-list">
        <div
          class="menu-top-list-item"
          v-for="(item, i) in classify"
          :key="i"
          @click="transmitCatid(i)"
          :style="
            ({
              background: 'url(' + item.cover + ') center',
            },
            { backgroundSize: '100%' })
          "
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      active: 0,
      bookList: [],
      classify: [],
      imgs: [
        {
          img: "https://easyreadfs.nosdn.127.net/khh7UJpoQObEsWa9GcddRw==/8796093022817550996",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/n8-OQw4ARPkvvCeBm6OoQg==/8796093022817551786",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/8heOtyG3NrXlzZEDhJnTUg==/8796093022817553545",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/aMCcBwP4cDPakhVmuHe_oQ==/8796093022817550956",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/khh7UJpoQObEsWa9GcddRw==/8796093022817550996",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/n8-OQw4ARPkvvCeBm6OoQg==/8796093022817551786",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/8heOtyG3NrXlzZEDhJnTUg==/8796093022817553545",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/aMCcBwP4cDPakhVmuHe_oQ==/8796093022817550956",
        },
        {
          img: "https://easyreadfs.nosdn.127.net/n8-OQw4ARPkvvCeBm6OoQg==/8796093022817551786",
        },
      ],
    };
  },
  created() {
    this.getBookList();
  },
  methods: {
    //获取列表
    getBookList() {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/store/node.json?",
        // params: {
        //   source_uuid,
        // },
      })
        .then((result) => {
          // console.log("result.data.books==>", result.data.books);
          this.bookList = result.data.books;
          this.getClassify(0);
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //分类
    getClassify(active) {
      let uuid = this.bookList[active].node[0].url;
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu" + uuid,
      })
        .then((result) => {
          // console.log("result==>", result);
          this.classify = result.data.list[0].labels;
          for (let i = 0; i < this.classify.length; i++) {
            if (this.classify[i].cover === "") {
              this.classify[i].cover = this.imgs[i].img;
            }
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },

    //传递catid
    transmitCatid(i) {
      let catid = this.classify[i].url;
      this.$router.push({ name: "classifylist", params: { catid } });
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  .menu-top {
    width: 96%;
    margin: 0 auto;
    .menu-top-list {
      width: 90%;
      margin: 0 auto;
      padding-left: 10px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;
      .menu-top-list-item {
        width: 30%;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-right: 10px;
        margin-bottom: 10px;

        border-radius: 7px;
        background-color: #eee;
        text-align: center;
        font-size: 20px;
      }
    }
  }
}
</style>